package com.efamily.ewallet.client.account;

import java.util.HashSet;
import java.util.List;
import java.util.Set;

import com.efamily.ewallet.client.account.bean.AccountBean;
import com.efamily.ewallet.client.common.CustomEventType;
import com.efamily.ewallet.client.common.CustomEvents;
import com.extjs.gxt.ui.client.core.XTemplate;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.util.Util;
import com.extjs.gxt.ui.client.widget.Composite;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.google.gwt.user.client.ui.HTML;

public class AccountDetailsPanelWidget extends Composite {
	TabPanel tabPanel = new TabPanel();
	Set<Integer> accountIDSet = new HashSet<Integer>();

	public AccountDetailsPanelWidget() {
		TabItem advertTab = new TabItem("Advert");
		HTML advert = new HTML("Your Ad Can Be Here");
		advertTab.add(advert);
		tabPanel.add(advertTab);
		tabPanel.setTabScroll(true);
		initComponent(tabPanel);
		Dispatcher.get().addListener(
				CustomEvents.SHOW_USER_DETAILS.getEventType(),
				new Listener<BaseEvent>() {
					@SuppressWarnings("unchecked")
					public void handleEvent(BaseEvent be) {
						List<BeanModel> accounts = (List<BeanModel>) be
								.getSource();
						showNewAccountDetails(accounts);
					}
				});
	}

	public void showNewAccountDetails(BeanModel bean) {
		AccountBean accountBean = bean.getBean();
		if (!accountIDSet.contains(accountBean.getId())) {
			TabItem accountTab = new TabItem(accountBean.getNickName()
					+ " Details");
			accountTab.setClosable(true);
			String balanceColor = Double.compare(accountBean.getBalance(), 0) == -1 ? "red"
					: "green";
			XTemplate tpl = XTemplate.create(getTemplate(balanceColor));
			accountTab.removeAll();
			accountTab.addText(tpl.applyTemplate(Util.getJsObject(bean, 3)));
			accountTab.layout();
			tabPanel.add(accountTab);
			accountIDSet.add(accountBean.getId());
		}
	}

	private void showNewAccountDetails(List<BeanModel> accountBeanList) {
		for (BeanModel bean : accountBeanList) {
			showNewAccountDetails(bean);
		}
		int itemCount = tabPanel.getItemCount();
		TabItem tabItem = tabPanel.getItem(itemCount - 1);
		tabPanel.setSelection(tabItem);
	}

	private String createAccontDetails(AccountBean accountBean) {
		StringBuffer result = new StringBuffer(
				"<span style=\"font-family: 'Times New Roman'; font-size: 14pt; color: #0000c0\"><b><u>");
		result.append(accountBean.getNickName());
		result
				.append("</u></b></span><br><span style=\"font-family: 'Times New Roman'; font-size: 12pt\">Balance:</span> <span style=\"font-family: 'Times New Roman'; font-size: 13pt; color:");
		result
				.append((Double.compare(0, accountBean.getBalance()) == 1) ? "red"
						: "green");
		result.append("\">");
		result.append(accountBean.getBalance());
		result.append(accountBean.getNickName());
		result.append(accountBean.getNickName());
		result.append(accountBean.getNickName());
		return result.toString();
	}

	private native String getTemplate(String balanceColor) /*-{
		var html = [ 
		"<div style='margin-left:20;'><br><span style=\"font-family: 'Times New Roman'; font-size: 14pt; color: #0000c0\"><b><u>{nickName}</u></b></span>",
		"<table><tr><td><span style=\"font-family: 'Times New Roman'; font-size: 12pt\">Balance:</span></td><td width='15'/><td><span style=\"font-family: 'Times New Roman'; font-size: 13pt; color:" + balanceColor + "\"><u>{balance}</u></span></td></tr>",
		"<tr><td><span style=\"font-family: 'Times New Roman'; font-size: 12pt\">Occupation:</span></td><td width='15'/><td><span style=\"font-family: 'Times New Roman'; font-size: 13pt\"><u>{occupation}</u></span></td></tr>",
		"<tr><td><span style=\"font-family: 'Times New Roman'; font-size: 12pt\">Gender:</span></td><td width='15'/><td><span style=\font-family: 'Times New Roman'; font-size: 13pt\"><u>{gender}</u></span></td></tr>",
		"<tr><td><span style=\"font-family: 'Times New Roman'; font-size: 12pt\">Age:</span></td><td width='15'/><td><span style=\"font-family: 'Times New Roman'; font-size: 13pt\"><u>{age}</u></span></td></tr></table></div>"
		]; 
		return html.join("");
	}-*/;

}
